<template>
    <div>
        <a href="/show">查看优惠券 </a>
        <h1>房价列表</h1>
        <table class="table">
            <thead>
                <tr>
                    <td>房型名称</td>
                    <td>房价名称</td>
                    <td>几份早餐</td>
                    <td>价格</td>
                    <td>状态</td>
                    <td>排序</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data">
                    <td>{{ item.id }}</td>
                    <td>{{ item.houseTypeID }}</td>
                    <td>{{ item.breakfastNumber }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.state }}</td>
                    <td>{{ item.sort }}</td>
                    <td>
                        <input type="button" value="修改排序" @click="UpdateSort(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="Page(1)">
        <input type="button" value="上一页" @click="Page(2)">
        <input type="button" value="下一页" @click="Page(3)">
        <input type="button" value="尾一页" @click="Page(4)">
        <select v-model="p.size" @change="SetSize">
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
        <input type="text" v-model="p.index">
        <input type="button" value="跳转" @click="SetIndex">

        一共{{p.count}}条数据，每页面显示{{p.size}}条，一共分{{p.pcount}}页，当前第{{p.index}}页
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

onMounted(()=>{
    Getdata();
})

//跳转页面
const SetIndex=()=>{
    //当输入的不是数字时只显示第一页
    if(p.value.index *0!=0){
        p.value.index=1;
    }

    if(p.value.index > p.value.pcount)
    {
        p.value.index = p.value.pcount
    }
    Getdata();
}

//页容量变化
const SetSize=()=>{
    p.value.index=1;
    Getdata();
}

//跳转到修改页面
const UpdateSort=(val:any)=>{
    router.push({path:'/Edit',query:{id:val}})
}


const Page=(val:any)=>{
    if(val==1){
        p.value.index =1;
        Getdata();
    }
    if(val==2){
        if(p.value.index>1)
        {
            p.value.index -=1;
            Getdata();
        }
    }
    if(val==3){
        if(p.value.index < p.value.pcount)
        {
            p.value.index +=1;
            Getdata();
        }
    }
    if(val==4){
        p.value.index = p.value.pcount;
        Getdata();
    }
}

const data=ref([{
    "id": 1,
    "houseTypeID": 1,
    "price": 100,
    "name": "时宜",
    "houserNumber": 3,
    "breakfastNumber": 20,
    "personNumber": 20,
    "isDelete": false,
    "state": true,
    "sort": 1
}])
const p=ref({
    index:1,
    size:3,
    count:0,
    pcount:0
})
const Getdata=()=>{
    axios.get("https://localhost:7275/api/HousePrice/GetHousePricePage",{params:p.value}).then(res=>{
        data.value=res.data.data;

        p.value.count=res.data.count;
        p.value.pcount=Math.ceil(p.value.count/p.value.size);
    })
}
</script>

<style scoped>

</style>